<template>
  <div class="get-job">
    <van-nav-bar
      title="求职"
      left-text="返回"
      left-arrow
      @click-left="$router.push('/home')"
    />
    <img
      src="http://static.daojia.com/changsha/website-sem/zhaomulaodongzhe/res/banner-a0292ec.png"
      alt=""
    />
    <div class="job">
      <div class="job_title">
        <span class="gang">//////////</span
        ><span>&nbsp;&nbsp;&nbsp;大平台高收入有保障&nbsp;&nbsp;&nbsp;</span
        ><span class="gang">//////////</span>
      </div>
      <div class="second_title">请选择你想从事的工作</div>

      <!-- 表单开始 -->
      <van-form @submit="onSubmit">
        <van-field name="radio" label="单选框">
          <template #input>
            <van-radio-group v-model="radio" direction="horizontal">
              <van-radio name="1">月嫂</van-radio>
              <van-radio name="2">保姆</van-radio>
            </van-radio-group>
          </template>
        </van-field>
        <van-field
          v-model="myname"
          name="name"
          placeholder="您的称呼"
          :rules="[{ required: true, message: '请填写您的称呼' }]"
        />
        <van-field
          v-model="myphone"
          type="number"
          name="phone"
          placeholder="您的手机号"
          :rules="[
            { required: true, message: '请填写您的手机号' },
            { pattern: /^1[3456789]\d{9}$/, message: '手机号码格式错误！' },
          ]"
        />
        <van-field
          readonly
          clickable
          name="area"
          :value="value"
          label="地区选择"
          placeholder="点击选择省市区"
          @click="showArea = true"
        />
        <van-popup v-model="showArea" position="bottom">
          <van-area
            :area-list="areaList"
            @confirm="onConfirm"
            @cancel="showArea = false"
          />
        </van-popup>
        <div style="margin: 16px">
          <van-button
            class="signup_btn"
            round
            block
            type="info"
            native-type="submit"
            >马上免费报名</van-button
          >
        </div>
      </van-form>
    </div>
  </div>
</template>

<script>
import { Toast } from "vant";
import { areaList } from "./areaList";
export default {
  data() {
    return {
      radio: "1",
      myname: "",
      myphone: "",
      value: "",
      showArea: false,
      areaList: areaList, // 数据格式见 Area 组件文档
      showSucc: false,
    };
  },
  methods: {
    onSubmit(values) {
      console.log("submit", values);
      Toast("信息已提交成功，请耐心等待客服联系");
      this.$router.push("/home");
    },
    onConfirm(values) {
      this.value = values
        .filter((item) => !!item)
        .map((item) => item.name)
        .join("/");
      this.showArea = false;
    },
  },
};
</script>
<style lang='less' scoped>
.get-job {
  //   background-image: url("http://static.daojia.com/changsha/website-sem/zhaomulaodongzhe/res/banner-a0292ec.png");
  img {
    height: 300px;
    width: 100%;
  }
  .job {
    width: 95%;
    position: absolute;
    background-color: #fff;
    top: 340px;
    left: 9px;
    box-shadow: 0px 0px 10px #969696;
    border-radius: 5px;
  }
  .job_title {
    text-align: center;
    font-size: 18px;
    margin: 30px 0 20px 0;
    .gang {
      color: red;
      font-size: 14px;
    }
  }
  .second_title {
    margin-left: 15px;
    color: #949ea3;
    font-size: 13px;
  }
  .signup_btn {
    border: none;
    background-image: linear-gradient(to right, #e74b4c, #fc8150);
  }
}
</style>